<template>
  <div :p="p">
    <ul v-for="item of p" :key="item.url">
      <li>
        <div class="lf"><img :src="item.src" alt="">
          <p>微信昵称</p>
        </div>
        <div class="rt" @click.passive="routerDetail()">
          {{item.title}} </div>
      </li>
      <li>
        <ol>
          <li><img :src="item.src" alt=""><img :src="item.src" alt=""><img :src="item.src" alt=""><img :src="item.src" alt=""></li>
          <li>
            <watchs></watchs>
            <likes></likes>
            <span class="blank"></span>
            <share></share>
          </li>
        </ol>
      </li>
    </ul>
  </div>
</template>
<script>
import Watchs from "@/components/tips/Watchs";
import Likes from "@/components/tips/Likes";
import Share from "@/components/tips/Share";

export default {
  data() {
    return {

    }
  },
  props: ['p'],
  components: { Watchs, Likes, Share },
  methods: {
    routerDetail() {
      this.$router.push({ name: 'mjfull', params: { pp: this.pp } })
    }
  },
}
</script>

<style lang="less" scoped>
.main-contianer {
  overflow: hidden;
  margin: 0 auto;
  padding: 30px 0;
  width: 600px;
  height: 670px;
  background: #fff;
  border-radius: 30px; /*no*/
  ul {
    width: 600px;
    padding: 15px;
    padding: 20px 5px 26px 5px;
    border-bottom: 1px solid #b4b4b4;
    > li:first-child {
      margin-bottom: 20px;
    }
    > li {
      width: 100%;
      display: flex;

      justify-content: space-between;
      .lf {
        margin: 0 20px;
        img {
          width: 88px;
          height: 88px;
        }
        p {
          font-size: 20px;
          text-align: center;
        }
      }

      .rt {
        width: auto;
        text-align: left;
        overflow: hidden;
        line-height: 1.3em;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 4;
        -webkit-box-orient: vertical;
      }
      ol {
        width: 100%;
        li {
          padding: 0 16px;
          width: 100%;
        }
        > li:first-child {
          display: flex;
          display: -webkit-flex;
          justify-content: space-between;
          > img {
            width: 128px;
            height: 128px;
          }
        }
        > li:nth-child(2) {
          margin-top: 12px;
          display: flex;
          display: -webkit-flex;
          justify-content: space-around;
          span {
            margin: 0 15px;
          }
          .blank {
            margin: 0 auto;
          }
        }
      }
    }
  }
}
</style>
